import React, { useState, useMemo } from 'react';
import { Modal, Tabs } from 'antd';
import './indexRoom.less';

import type { TabsProps } from 'antd';
import InformationCard from './components/InformationCard'
import OtherSettings from './components/OtherSettings';
import { useIntl } from '@umijs/max';
interface Props {
  isModalOpen: boolean;
  handleOk: () => void;
  selectedItem: any;
  setsendMsg: (event: object) => void
  setType: (event: string) => void
  setGetcardMsg: (event: object) => void
  setchildRoomNum: (event: string) => void
  setGETID: (enent: string) => void
  setCardtime: (event: any) => void
  setCardMessage: (event: any) => void
}
const ModalComponent: React.FC<Props> = ({ isModalOpen,
  handleOk, selectedItem, setsendMsg, setType, setGetcardMsg,
  setchildRoomNum, setGETID, setCardtime,setCardMessage
}) => {

  const intl = useIntl();
  // console.log("userMsg", selectedItem)
  const informationCard = useMemo(() => (
    <InformationCard
      userMsg={selectedItem}
      ChildRoom={selectedItem.ChildRoom}
      setsendMsg={setsendMsg}
      setType={setType}
      setGetcardMsg={setGetcardMsg}
      handleOk={handleOk}
      setchildRoomNum={setchildRoomNum}
      setGETID={setGETID}
      setCardMessage={setCardMessage}
    />
  ), [selectedItem.user, selectedItem.ChildRoom]);
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({ id: "business.Card info" }),
      children: informationCard,
    },
    {
      key: '3',
      label: intl.formatMessage({ id: "business.Other settings" }),
      children: <OtherSettings
        setsendMsg={setsendMsg}
        setType={setType}
        userMsg={selectedItem}
        handleOk={handleOk}
        setCardtime={setCardtime}
        setCardMessage={setCardMessage}
      />,
    },
  ].filter(Boolean); // 过滤掉为空的数据
  const onChange = (key: string) => {
    setSelectedKey(key);
  };
  const [selectedKey, setSelectedKey] = useState('1'); // 初始选中的是第一个 tab  
  const modalTitle = (
    <>
      <div className='titleBoder'>
        {intl.formatMessage({ id: "business.Room type" })}  : <span>
          {selectedItem.roomName} - {' '}
          {selectedItem.status == 1 ? intl.formatMessage({ id: "business.Clean room" })
            : selectedItem.status == 2 ? intl.formatMessage({ id: "business.Messy room" })
              : selectedItem.status == 3 ? intl.formatMessage({ id: "business.Checking room" })
                : selectedItem.status == 4 ? intl.formatMessage({ id: "business.Repair room" }) : intl.formatMessage({ id: "business.Expired" })}
        </span>
        <span> &emsp;&emsp;&emsp;&emsp;&emsp;&nbsp; </span>

        <div className='PXboder'></div> {/*0.5px的线*/}
      </div>
    </>
  );

  return (
    <>
      <Modal
        title={modalTitle}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleOk}
        width={1190}
        footer={null}
      >
        <Tabs
          defaultActiveKey={selectedKey}
          items={items}
          onChange={onChange}
        />
      </Modal>
    </>
  );
};

export default ModalComponent;  